<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Line Chart</title>
    <script src="js/Chart.min.js"></script>
    <script src="js/Chart.js"></script>

    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <style>
        canvas{
        }
    </style>
</head>
<body>
<div style="width: 410px;height: 610px">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>


<script>

    var lineChartData = {
        // x轴的标示
        labels : ["January","February","March","April","May","June","July"],
        // 数据，数组中的每一个object代表一条线
        datasets : [
            {
                label:"数据1",
                // 颜色的使用类似于CSS，你也可以使用RGB、HEX或者HSL
                // rgba颜色中最后一个值代表透明度
                // 填充颜色
//                fillColor : "#9045ff",
//                // 线的颜色
//                strokeColor : "#9045ff",
//                // 点的填充颜色
//                pointColor : "#9045ff",
//                // 点的边线颜色
//                pointStrokeColor : "#9045ff",
                // 与x轴标示对应的数据
                data : [65,59,90,81,56,55,40]
            },
            {
                label:"数据2",
                backgroundColor: "rgba(255,99,255,0.2)",
                borderColor: "rgba(255,99,255,1)",
                borderWidth: 2,
                hoverBackgroundColor: "rgba(255,99,255,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                data : [28,48,40,19,96,27,100]
            }
        ]

    };
    var  popers ={
        scaleOverride :true ,   //是否用硬编码重写y轴网格线
        scaleSteps : 15,        //y轴刻度的个数
        scaleStepWidth : 300,   //y轴每个刻度的宽度
        scaleStartValue : 0,    //y轴的起始值
        pointDot : true,        //是否显示点
        pointDotRadius : 5,     //点的半径
        pointDotStrokeWidth : 1,//点的线宽
        datasetStrokeWidth : 3, //数据线的线宽
        animation : true,       //是否有动画效果
        animationSteps : 60    //动画的步数
    }

   var chart = new Chart(document.getElementById("canvas").getContext("2d"), {
//       options:popers,
        type:'line',
        data: lineChartData,

    });
//    chart.data=lineChartData;
//    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

</script>
</body>
</html>